<template>
    <el-drawer v-model="drawerVisible" title="企业管理详情" direction="rtl" size="80%" :with-header="true"
        style="background: #F7F7F7;">
        <div class="header">
            <div class="header-left">
                <div class="mainimg"><img :src="rowData.companyInfoVo.companyUrl" alt=""></div>
                <div class="left-title">
                    <div class="main-title">
                        <div class="name">{{ rowData.companyInfoVo.companyName }}</div>
                        <div class="sub"><img src="../assets/company.png" alt=""></div>
                    </div>
                    <div class="userid">用户 ID: {{ rowData.companyInfoVo.id }}</div>
                </div>
                <div class="detail">
                    <div class="phone">
                        <p>手机号码: <text>{{ rowData.companyInfoVo.phone }}</text></p>
                    </div>
                    <div class="time">
                        <p>注册时间: <text>{{ rowData.companyInfoVo.createTime }}</text></p>
                    </div>
                </div>
            </div>

        </div>
        <div class="center">
            <div class="tab-area">
                <el-tabs v-model="activeTab">
                    <el-tab-pane label="实名信息" name="Realname" />
                    <el-tab-pane label="资质信息" name="qualificate" />
                </el-tabs>
            </div>
            <div v-if="activeTab == 'qualificate'">
                <div class="square">
                    <div class="detail">
                        <p class="label">食品类: </p>
                        <p class="msg">已认证</p>
                    </div>
                    <div class="detail">
                        <p class="label">保健品类: </p>
                        <p class="msg">已认证</p>
                    </div>
                </div>
            </div>
            <div v-if="activeTab == 'Realname'">
                <div class="content">
                    <div class="one">
                        <div class="detail">
                            <p class="label">账号类型: </p>
                            <p class="msg">企业账号</p>
                        </div>
                        <div class="detail">
                            <p class="label">认证状态: </p>
                            <p class="msg flag">{{ rowData.companyInfoVo.companyVerifyStatus === 0 ? '待审核' : rowData.companyInfoVo.companyVerifyStatus === 1 ? '审核通过' : rowData.companyInfoVo.companyVerifyStatus === 2 ? '驳回' : '未知' }}</p>
                        </div>
                        <div class="detail">
                            <p class="label">认证时间: </p>
                            <p class="msg">{{  rowData.companyInfoVo.updateTime }}</p>
                        </div>
                    </div>
                    <div class="two">
                        <div class="detail">
                            <p class="label">公司/个体名称: </p>
                            <p class="msg">北京蓝徒科技有限公司</p>
                        </div>
                        <div class="detail">
                            <p class="label">企业证件类型: </p>
                            <p class="msg">营业执照</p>
                        </div>
                        <div class="detail">
                            <p class="label">组织机构代码: </p>
                            <p class="msg">{{ rowData.companyInfoVo.cardName }}</p>
                        </div>
                    </div>
                    <div class="three">
                        <div class="detail">
                            <p class="label">法人姓名: </p>
                            <p class="msg">{{ rowData.companyInfoVo.cardName }}</p>
                        </div>
                        <div class="detail">
                            <p class="label">法人证件类型: </p>
                            <p class="msg">二代身份证</p>
                        </div>
                        <div class="detail">
                            <p class="label">法人证件号码: </p>
                            <p class="msg">{{ rowData.companyInfoVo.cardCode }}</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="footer">
            <p>认证记录</p>
            <!-- 数据表格 -->
            <div class="table-container">
                <el-table :data="tableData" style="width: 100%" border stripe
                    :header-cell-style="{ background: '#f5f7fa' }">
                    <!-- 表格列定义保持不变 -->
                    <el-table-column prop="type" label="认证类型" min-width="120" />
                    <el-table-column prop="content" label="认证内容" min-width="120" />
                    <el-table-column prop="status" label="当前状态" min-width="120">
                        <template #default="scope">
                            <el-tag :type="statusType(scope.row.status)">
                                {{ statusText(scope.row.status) }}
                            </el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column prop="time" label="创建时间" min-width="160" />
                    <el-table-column label="操作" width="180" fixed="right">
                        <template #default="scope">
                            <el-button-group>
                                <el-button type="primary" size="small" @click="handleView(scope.row)">查看</el-button>
                                <el-button type="success" size="small" v-if="scope.row.status == 'pending'"
                                    @click="handleClick(scope.row, 'success')">通过</el-button>
                                <el-button type="warning" size="small" v-if="scope.row.status == 'pending'"
                                    @click="handleClick(scope.row, 'fail')">驳回</el-button>
                            </el-button-group>
                        </template>
                    </el-table-column>
                </el-table>

                <!-- 分页 -->
                <!-- <div class="pagination-container">
                    <el-pagination v-model:currentPage="pagination.currentPage" v-model:page-size="pagination.pageSize"
                        :total="pagination.total" :page-sizes="[10, 20, 50, 100]"
                        layout="total, sizes, prev, pager, next, jumper" @size-change="handleSizeChange"
                        @current-change="handleCurrentChange" background="true" />
                </div> -->
            </div>
        </div>
    </el-drawer>

    <!--查看-->
    <el-dialog v-model="dialogVisibleDetail" title="详情" width="800">
        <div class="look-dialog">
            <el-form style="max-width: 600px;display: flex;" :model="sizeForm" label-width="auto" label-position="top">
                <div>
                    <el-form-item label="营业执照: ">
                        <img class="smallimg" src="../assets/background.png" alt="" @click="photoShow">
                    </el-form-item>
                    <el-form-item label="企业名称: ">
                        <el-input v-model="sizeForm.name" disabled autosize />
                    </el-form-item>
                    <el-form-item label="统一社会信用代码: ">
                        <el-input v-model="sizeForm.code" disabled autosize />
                    </el-form-item>
                    <el-form-item label="注册地址: ">
                        <el-input v-model="sizeForm.address" disabled autosize />
                    </el-form-item>
                    <el-form-item label="营业期限: ">
                        <el-input v-model="sizeForm.time" disabled autosize />
                    </el-form-item>
                </div>
                <div class="dialog-right">
                    <el-form-item label="法人身份证: ">
                        <div style="display: flex;">
                            <img class="usersmallimg" src="../assets/background.png" alt="" @click="photoShow">
                            <img class="usersmallimg" src="../assets/background.png" alt="" style="margin-left:10px" @click="photoShow">
                        </div>
                    </el-form-item>
                    <el-form-item label="法人姓名: ">
                        <el-input v-model="sizeForm.username" disabled autosize />
                    </el-form-item>
                    <el-form-item label="证件号码: ">
                        <el-input v-model="sizeForm.iencode" disabled autosize />
                    </el-form-item>
                    <el-form-item label="手机号: ">
                        <el-input v-model="sizeForm.phone" disabled autosize />
                    </el-form-item>
                    <el-form-item label="账号昵称: ">
                        <el-input v-model="sizeForm.nick" disabled autosize />
                    </el-form-item>
                </div>
            </el-form>
        </div>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="dialogVisibleDetail = false">驳回</el-button>
                <el-button type="primary" @click="dialogVisibleDetail = false">
                    通过
                </el-button>
            </div>
        </template>
    </el-dialog>

    <!--通过/驳回-->
    <el-dialog v-model="dialogVisible" :title="flagShow === true ? '通过' : '驳回'" width="500">
        <span>是否确认{{ flagShow === true ? '通过' : '驳回' }}? </span>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="dialogVisible = false">取消</el-button>
                <el-button type="primary" @click="sureBtn()">
                    确认
                </el-button>
            </div>
        </template>
    </el-dialog>

    <!--放大图片-->
    <el-dialog v-model="dialogVisiblePhoto" title="" width="800">
        <img src="../assets/background.png" alt="" style="width: 765px;height: 500px;">
    </el-dialog>
</template>

<script setup>
import { ref, onMounted, onUnmounted, computed, reactive, defineProps, defineEmits, watch } from 'vue'
import { companyInforeview } from "@/api/user";

// 定义props接收父组件传递的数据
const props = defineProps({
    visible: {
        type: Boolean,
        default: false
    },
    rowData: {
        type: Object,
        default: () => ({})
    }
})
const currentRow = ref({});

// 定义emit用于通知父组件drawer状态变化
const emit = defineEmits(['update:visible'])

// 抽屉可见性状态
const drawerVisible = ref(props.visible)

// 监听父组件传入的visible变化
watch(() => props.visible, (newVal) => {
    drawerVisible.value = newVal
})

// 监听drawerVisible变化并通知父组件
watch(drawerVisible, (newVal) => {
    emit('update:visible', newVal)
})

const dialogVisible = ref(false)
const flagShow = ref()
const dialogVisibleDetail = ref(false)
const dialogVisiblePhoto = ref(false)
// 标签页激活项
const activeTab = ref('Realname');
const sizeForm = reactive({
    name: '广州冰泉化妆品科技有限公司',
    code: '466',
    address: '1344',
    time: '期限内有效',
    username: 'lw'
})



// 查看
const handleView = (row) => {
    console.log('查看详情:', row);
    dialogVisibleDetail.value = true;
};
// 放大图片
const photoShow = () => {
    dialogVisiblePhoto.value = true;
}
// 通过/驳回
const handleClick = (row, flag) => {
    currentRow.value = row;
    dialogVisible.value = true;
    flag === 'success' ? flagShow.value = true : flagShow.value = false;
};
// 通过/驳回
const sureBtn = () => {
    const parmas = {
        token: localStorage.getItem('token'),
        reviewStatus: 0,
        id: currentRow.value.id
    }

    companyInforeview(parmas)
        .then((res) => {
            if (res.code === 200) {
                dialogVisible.value = false;
            }
        })
        .catch((err) => {
            console.error('发送失败:', err);
        });

   
}

// 原始表格数据
const tableData = ref([])

// 状态类型
const statusType = (status) => {
    const statusMap = {
        pending: 'warning',
        approved: 'success',
        rejected: 'danger'
    };
    return statusMap[status] || '';
};
// 状态文本
const statusText = (status) => {
    const statusMap = {
        pending: '审核中',
        approved: '已通过',
        rejected: '已驳回'
    };
    return statusMap[status] || '未知';
};

// 分页配置
// const pagination = reactive({
//     currentPage: 1,
//     pageSize: 10
// });

const fetchData = () => {
    tableData.value = props.rowData.companyList
};

//  首次加载 
fetchData()

// 分页大小变化
// const handleSizeChange = (size) => {
//     pagination.pageSize = size;
//     fetchData();
// };

// 当前页变化
// const handleCurrentChange = (page) => {
//     pagination.currentPage = page;
//     fetchData();
// };


</script>

<style scoped lang="scss">
.header {
    height: 140px;
    background: #FFFFFF;
    border-radius: 10px;
    margin-top: -20px;

    .header-left {
        display: flex;
        align-items: center;

        .mainimg img {
            margin: 20px;
            width: 100px;
            height: 100px;
            border-radius: 50%;
        }

        .left-title {
            display: flex;
            flex-direction: column;
            padding-right: 60px;
            border-right: 1px solid #EEEEEE;

            .main-title {
                display: flex;
                justify-content: center;
                align-items: center;

                .name {
                    font-family: PingFang SC, PingFang SC;
                    font-weight: 600;
                    font-size: 20px;
                    color: #333333;
                    margin-right: 10px;
                }

                .sub {
                    img {
                        width: 83px;
                        height: 22px;
                    }
                }
            }

            .userid {
                font-size: 14px;
                color: #333333;
                margin-top: 10px;
            }
        }

        .detail {
            margin-left: 60px;

            .phone,
            .time {
                p {
                    font-size: 14px;
                    color: #333333;
                }

                text {
                    font-size: 14px;
                    color: #999999;
                }
            }
        }
    }


}

.center {
    height: 200px;
    background: #FFFFFF;
    border-radius: 10px;
    margin-top: 20px;

    .tab-area {
        margin-left: 20px;
    }

    .square {
        .detail {
            display: flex;
            margin-left: 20px;

            .label {
                font-size: 14px;
                color: #999999;
                font-weight: 400;
            }

            .msg {
                font-weight: 500;
                font-size: 14px;
                color: #52C41A;
                margin-left: 10px;
            }
        }
    }

    .content {
        margin-left: 20px;
        display: flex;

        .one,
        .two,
        .three {
            margin-right: 40px;
            padding-right: 40px;

            .detail {
                display: flex;

                .label {
                    font-size: 14px;
                    color: #999999;
                    font-weight: 400;
                }

                .msg {
                    font-weight: 500;
                    font-size: 14px;
                    color: #333333;
                    margin-left: 10px;
                }

                .flag {
                    color: #52C41A;
                }
            }

        }

        .one,
        .two {
            border-right: 1px solid #EEEEEE;
        }
    }

}

.footer {
    margin-top: 20px;
    background: #FFFFFF;
    border-radius: 10px;

    p {
        padding: 20px 0px 0px 20px;
    }

}



.pagination-container {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin-top: 20px;
}

.custom-pagination {
    --el-pagination-hover-bg-color: #f5f7fa;
    --el-pagination-bg-color: transparent;
    --el-pagination-text-color: #606266;
    --el-pagination-button-disabled-bg-color: #f5f7fa;
    --el-pagination-button-disabled-text-color: #c0c4cc;
}

.pagination-pages {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
}

.pagination-btn {
    min-width: 32px;
    height: 32px;
    padding: 0;
    margin: 0 4px;
    background-color: transparent;
    border: 1px solid #dcdfe6;
    color: #606266;
    font-size: 14px;
    cursor: pointer;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pagination-btn:hover {
    color: #409eff;
}

.pagination-btn.active {
    background-color: #409eff;
    color: #fff;
    border-color: #409eff;
}

.pagination-btn.disabled {
    color: #c0c4cc;
    cursor: not-allowed;
}

.smallimg {
    width: 250px;
    height: 140px;
    cursor: pointer;
}
.usersmallimg {
    width: 200px;
    height: 140px;
    cursor: pointer;
}

.dialog-right {
    margin-left: 80px;
}
</style>